<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" th:href="@{/static/lib/layui-v2.8.3/css/layui.css}" media="all">
</head>
<body>
<div id="ID-transfer-demo-showSearch"></div>
<button type="button" class="layui-btn" lay-on="getData">提交</button>

<script th:inline="javascript">
    let ctx = [[${#httpServletRequest.getContextPath()}]];
    let userId = [[${userId}]];
</script>
<script th:src="@{/static/lib/layui-v2.8.3/layui.js}" charset="utf-8"></script>
<script>
    layui.use(function () {
        var transfer = layui.transfer,
        util = layui.util;

        fetch(ctx + "/sysrole/grant").then((res) => {
            return res.json();
        }).then( (data) => {
            console.log(data);
            if (data.code == 200){
                // 数据
                data = data.data;
                let values = [];
                fetch(ctx + "/sysrole/grant/" + userId).then((res) => {
                    return res.json();
                }).then((res) => {
                    if (res.code == 200){
                        values = res.data;
                    }
                    // 渲染
                    transfer.render({
                        id: 'demo-inst', // 定义唯一索引
                        elem: '#ID-transfer-demo-showSearch',
                        data: data,
                        parseData: function (res) {
                            return {
                                "value": res.id, // 数据值
                                "title": res.roleName, // 数据标题
                                "disabled": res.disabled,  // 是否禁用
                                "checked": res.checked // 是否选中
                            }
                        },
                        value:values,
                        title: ['未设置的角色', '已设置的角色'],
                        showSearch: true
                    });
                });

            } else {
                layui.layer.msg("服务器异常请刷新后重试。", {icon: 2, time: 1000});
            }

            util.on('lay-on', {
                getData: function (othis) {
                    var getData = transfer.getData('demo-inst'); // 获取右侧数据
                    console.log(getData);
                    let roles = [];
                    for (let item of getData){
                        roles.push(item.value);
                    }
                    console.log(roles);

                    if (roles.length > 0 ){
                        // 发送请求
                        fetch(ctx + '/sysuser/role',{
                            headers: {
                                'Content-Type': 'application/json'
                            },
                            method: 'POST',
                            body: JSON.stringify({
                                userId: userId,
                                roles: roles
                            })
                        }).then(function (resp){
                            return resp.json();
                        }).then(function(json){
                            if (json.code == 200){
                                var index = layer.alert('设置成功', {
                                    title: '操作成功',
                                }, function () {
                                    // 关闭弹出层
                                    layer.close(index);

                                    var iframeIndex = parent.layer.getFrameIndex(window.name);
                                    parent.layer.close(iframeIndex);

                                });
                            } else {
                                layer.msg(json.msg, {icon: 2, time: 1000});
                            }
                        }).catch(function (error) {
                            layer.msg(error.msg, {icon: 2, time: 1000});
                        });
                    }


                }
            });


        })

    });
</script>
</body>
</html>